<template>
	<view>
		<!-- 顶部搜索区域 -->
		<view class="w-max bg-red h80">
			<!-- <serach :from="2" :searchQuery="query"></serach>
			 -->
			<view class="search h80">
				<view class="searchbox flex pr20 pl80">
					<view class="searchIcon flex col-center flex1">
						<image src="~@/static/image/index/search.png" class="w24 h24 mr10"></image>
					</view>
					<u-input v-model="query.name" type="text" :border="false" :custom-style='customStyle' placeholder="请输入内容"
						trim :clearable='false' placeholder-style='color: #FFFFFF;' class="w-max" />
					<view class="flex row-right" @click="searchBtn">
						<text>搜索</text>
					</view>
				</view>
			</view>
		</view>
		<!-- //顶部搜索区域 -->

		<!-- 筛选区域 -->
		<view class="h90 w-max bg-f flex row-around col-center fs24 color9">
			<view class="" @click="pay_time">
				<text class="mr10">综合排序</text>
				<u-icon name="arrow-down-fill" size='16' v-if="query.pay_time==2"></u-icon>
				<u-icon name="arrow-up-fill" size='16' v-else></u-icon>
			</view>
			<view class="" @click="salesHandle">
				<text class="mr10">销量</text>
				<u-icon name="arrow-down-fill" size='16' v-if="query.sales==2"></u-icon>
				<u-icon name="arrow-up-fill" size='16' v-else></u-icon>
			</view>
			<view class="" @click="layout=!layout">
				<text class="cuIcon-list fs36" v-if="layout"></text>
				<text class="cuIcon-qrcode fs36" v-else></text>
			</view>
		</view>
		<!-- //筛选区域 -->
		<u-empty mode="list" text="数据为空" v-if="list.length==0"></u-empty>
		<view class="" v-else>
			<!-- 一行3布局区域 -->
			<!-- :class="{'row-between':list.length > 2}" -->
			<view class="flex flex-wrap ml30 mb30" v-if="layout">
				<!-- :class="{'mr30':list.length < 3}" -->
				<view class="radius16 goodsItem mt30 mr30" v-for="(item,i) in list" :key='i'
					@click="goBrandDetail(item.id)">
					<!-- 上面的图片 -->
					<image :src="item.logo" class="w-max h210" v-if="item.logo"></image>
					<image src="../../static/image/index/morenlogo.jpg" class="w210 h210 mr20 radius16" v-else></image>
					<!-- //上面的图片 -->
					<!-- 下面的盒子 -->
					<view class=" mt20 pl20 pr20 ">
						<view class="mb20">{{item.name}}</view>
						<view class="flex row-between col-center">
							<view class="color9 fs24">
								<text>销量 </text>
								<text>{{item.sales}}</text>
							</view>
						</view>
					</view>
					<!-- //下面的盒子 -->
				</view>
			</view>
			<!-- //一行3布局区域 -->
			
			<!-- 纵向布局区域 -->
			<view class="pl30 pr30 pb30" v-else>
				<view class="goodsItem-row flex mt30" v-for="(item,i) in list" :key='i' @click="goBrandDetail(item.id)">
					<view class="">
						<image :src="item.logo" class="w126 h126 mr20 radius16" v-if="item.logo"></image>
						<image src="../../static/image/index/morenlogo.jpg" class="w126 h126 mr20 radius16" v-else></image>
					</view>
					<!-- 左边的盒子 -->
					<view class="flex row-column row-between flex1">
						<!-- 左边上面的盒子 -->
						<text class="fs28 color3 fw">{{item.name}}</text>
						<!-- 左边下面的盒子 -->
						<view class="flex row-between">
							<view class="">
								<!-- <text>ID：</text>
								<text>{{item.id}}</text> -->
							</view>
							<view class="">
								<text>销量 </text>
								<text>{{item.sales}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 纵向布局区域 -->
		</view>
	</view>
</template>

<script>
	// import serach from '@/components/search/search.vue'
	export default {
		name: 'brandList',
		// components: {
		// 	serach
		// },
		onLoad(opt) {
			console.log(opt)
			if(opt.name) {
				this.query.name=opt.name
				//获取店铺列表
				this.getlist()
			}else {
				//获取店铺列表
				this.getlist()
			}
			
		},
		data() {
			return {
				customStyle:{
					color:'#fff',
				},
				//请求参数
				query: {
					page: 1,
					size: 10,
					//销量排序
					sales: 2,
					//综合排序
					pay_time: 2,
					name: ''
				},
				layout: true,
				//节流阀
				throttle: false,
				list: [],

			};
		},
		methods: {
			//获取店铺列表
			getlist() {
				console.log(111)
				this.throttle = true
				this.$api.get_list(this.query).then(res => {
					console.log(res)
					this.list = [...this.list, ...res.data]
					this.throttle = false
				}).catch(err => {
					this.throttle = false
				})
			},
			// 综合排序
			pay_time() {
				if (this.throttle) {
					return
				}
				this.query.pay_time == 2 ? this.query.pay_time = 1 : this.query.pay_time = 2
				this.list = []
				this.getlist()
			},
			//销量排序
			salesHandle() {
				if (this.throttle) {
					return
				}
				this.query.sales == 2 ? this.query.sales = 1 : this.query.sales = 2
				this.list = []
				this.getlist()
			},
			//跳转到店铺详情
			goBrandDetail(shop_id) {
				// console.log(shop_id)
				uni.navigateTo({
					url: '/subpkg/brandDetail/brandDetail?shop_id=' + shop_id
				})
			},
			//搜索店铺列表
			searchBtn() {
				if(this.query.name=='') {
					this.$msg('请输入搜索内容')
					return
				}
				this.list=[]
				this.getlist()
			}
		},
		//触底加载更多
		onReachBottom() {
			this.query.page++
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.goodsItem {
		width: 210rpx;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		margin-top: 30rpx;

		image {
			border-radius: 16rpx 16rpx 0 0;
		}
	}

	.goodsItem-row {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 16rpx;
		color: #999999;
		font-size: 24rpx;
	}

	.search {
		.searchbox {
			position: relative;
			height: 68rpx;
			background: #E89797;
			border-radius: 34rpx;
			// text-align: center;
			line-height: 68rpx;
			width: 100%;
			color: #FFFFFF;
			.searchIcon {
				position: absolute;
				top: 50%;
				left: 40rpx;
				transform: translateY(-50%);
			}

			text {
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
